import * as React from 'react'
import { Menu, Icon, Divider, Popconfirm, Button } from 'antd/es'
import { connect } from 'react-redux'
import { getLogicQuiz } from '../../../actions/assignment'

const { SubMenu } = Menu

class LeftSider extends React.Component<any> {
    state = {
        restTimeInSeconds: null,
    }

    componentDidMount = () => {
        const { quizId } = this.props
        this.props.getLogicQuiz(quizId)
        const { id } = this.props.logicReviewQuiz
        if (id === null) {
            this.timer()
        }
    }

    timer = () => {
        const { assignmentId, quizId } = this.props
        setTimeout(() => {
            const restTimeInSeconds = this.getRestTimeInSeconds()
            this.setState({ restTimeInSeconds })
            if (restTimeInSeconds <= 0) {
                this.submitAnswer()
                this.props.getLogicReviewQuiz(assignmentId, quizId)
                return
            }
            this.timer()
        }, 1000)
    }

    getRestTimeInSeconds = () => {
        const { logicQuizSubmission, logicQuiz } = this.props
        const currentTime = new Date().getTime() / 1000
        const startTime = new Date(logicQuizSubmission.startTime).getTime() / 1000
        const timeBox = logicQuiz.timeBoxInMinutes * 60
        const restTime = timeBox + startTime - currentTime
        return Math.floor(restTime)
    }

    getTimeBoxString = () => {
        const restTimeInSeconds = this.state.restTimeInSeconds

        if (this.props.logicReviewQuiz.id) {
            return '答题结束'
        }

        if (restTimeInSeconds === null) {
            return ' 倒计时： - 分 - 秒'
        }

        const restMinutes = Math.floor(restTimeInSeconds / 60)
        const restSeconds = restTimeInSeconds % 60
        return ` 倒计时： ${restMinutes} 分 ${restSeconds} 秒`
    }

    submitAnswer = () => {
        const { quizId, assignmentId, taskId } = this.props
        this.props.submitLogicReviewQuiz(taskId, assignmentId, quizId)
    }

    handleMenuSelect = (key: any) => {
        const { logicQuizItemAnswers, quizId, assignmentId } = this.props

        if (logicQuizItemAnswers.length > 0) {
            this.props.submitLogicQuizItemAnswer({ assignmentId, answers: logicQuizItemAnswers })
        }

        this.props.getLogicQuizItem(assignmentId, quizId, parseInt(key))
        this.props.updateQuizItemId(parseInt(key));
    }

    render() {
        const { logicQuizSubmission, selectQuizItemId, logicReviewQuiz } = this.props
        const { twlogicQuizItemAnswer } = logicQuizSubmission
        const timeBoxString = this.getTimeBoxString()
        return <div style={{ height: '100%', borderRight: '1px solid #e8e8e8' }}>

            <div style={{ textAlign: 'center' }}>
                <p>{timeBoxString}</p>
                <Popconfirm title="提交后将不能再对答案进行修改，确定提交？" okText="是" cancelText="否" onConfirm={this.submitAnswer}>
                    <Button type="primary" disabled={logicReviewQuiz.id > 0} >结束答题</Button>
                </Popconfirm>
            </div>

            <Menu
                onSelect={({ key }) => { this.handleMenuSelect(key) }}
                mode='inline'
                selectedKeys={[selectQuizItemId + '']}
                defaultOpenKeys={['quiz']}
                style={{ borderRight: 'none' }}>
                <Divider />
                <SubMenu key='quiz' title={<span><Icon type='user' />题目</span>}>
                    {
                        twlogicQuizItemAnswer.map((item: any, key: any) => {
                            const exampleText = (item.id) ? "" : " <例题>"
                            return (<Menu.Item key={key + 1}>{`第${key + 1}题${exampleText}`}</Menu.Item>)
                        })
                    }
                </SubMenu>
            </Menu>

        </div>
    }
}

const mapStateToProps = ({ logicQuiz, logicQuizItemAnswers }: { logicQuiz: any, logicQuizItemAnswers:any }) => ({
    logicQuiz,
    logicQuizItemAnswers
})

const mapDispatchToProps = (dispatch: Function) => ({
    getLogicQuiz: (quizId: number) => dispatch(getLogicQuiz(quizId))
})

export default connect(mapStateToProps, mapDispatchToProps)(LeftSider)